<template>
	<view class="TodoEdit">
		<view class="title">
			{{id ? '编辑' : '新建'}}待办项
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					开始时间: 
				</view>
				<view class="value">
					<uni-datetime-picker type="datetime" v-model="start_time"></uni-datetime-picker>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					待办内容: 
				</view>
				<view class="value">
					<input v-model='content' type="text">
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					任务状态: 
				</view>
				<view class="value">
					<uni-data-select
						v-model="status"
						:localdata="statusOption"
					></uni-data-select>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					重要任务: 
				</view>
				<view class="value">
					<uni-data-checkbox
						v-model="isImportant"
						:localdata="[
							{ value: false, text: '否' },
							{ value: true, text: '是' }
						]"
					></uni-data-checkbox>
				</view>
			</view>
		</view>
		<view class="saveBtn" @tap="save">
			保存
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				start_time: '',
				content: '',
				status: 'todo',
				isImportant: false,
				statusOption: [
					{ value: 'todo', text: '待办' },
					{ value: 'doing', text: '进行中' },
					{ value: 'done', text: '已完成' },
				],
				msgType: '',
				messageText: ''
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.id && this.getDetail(this.id)
		},
		methods: {
			async getDetail(id) {
				const [err, res] = await uni.request({
					url: `${this.BASE_URL}/getTodoItem/${id}`
				})
				this.start_time = new Date(res.data.data.start_time).getTime();
				this.content = res.data.data.content;
				this.status = res.data.data.status;
				this.isImportant = res.data.data.isImportant;
			},
			save() {
				const _this = this;
				if(this.id) {
					uni.request({
						url: _this.BASE_URL + '/todo' + '/' + _this.id,
						method: 'POST',
						data: {
							start_time: _this.start_time,
							content: _this.content,
							status: _this.status,
							isImportant: _this.isImportant
						},
						success() {
							_this.msgType = 'success',
							_this.messageText = '更新待办项成功'
							_this.$refs.message.open();
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/TodoList/TodoList"
								})
							}, 2000)
						}
					})
				} else {
					uni.request({
						url: _this.BASE_URL + '/todo',
						method: 'POST',
						data: {
							start_time: _this.start_time,
							content: _this.content,
							status: _this.status,
							isImportant: _this.isImportant
						},
						success() {
							_this.msgType = 'success',
							_this.messageText = '创建任务成功'
							_this.$refs.message.open();
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/TodoList/TodoList"
								})
							}, 2000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.TodoEdit {
		.title {
			font-size: 48rpx;
			font-weight: bold;
			margin: 20rpx 10rpx;
		}
		.form {
			.form-item {
				margin: 20rpx 0;
				.label {
					color: #656572;
					font-weight: bold;
					font-size: 28rpx;
					margin: 10rpx 20rpx 20rpx 20rpx;
				}
				.value {
					margin: 10rpx 20rpx;
					
					input {
						border: 1px solid #d9d9d9;
						height: 80rpx;
						padding: 0 10rpx;
						border-radius: 10rpx;
						
						&:hover {
							border: 1px solid #4096ff;
						}
					}
					
					.image_upload {
						width: 300rpx;
						height: 300rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1px dashed #4096ff;
						
						.ware_image {
							width: 100%;
						}
						
						.upload_icon {
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
			}
		}
		.saveBtn {
			width: 100%;
			height: 160rpx;
			line-height: 160rpx;
			background-color: #4096ff;
			color: #fff;
			font-weight: bold;
			font-size: 48rpx;
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
</style>
